import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter_xxyk/constant/routes.dart';
import 'package:flutter_xxyk/model/user_info.dart';
import 'package:flutter_xxyk/widgets/click_item.dart';
import 'package:get_it/get_it.dart';
import 'package:sp_util/sp_util.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({Key? key}) : super(key: key);

  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {

  final Dio dio = GetIt.I<Dio>();

  UserInfo? userInfo;

  bool _isLoading = false;

  @override
  void initState() {
    getUserInfo();
    super.initState();
  }

  Future<void> getUserInfo() async {
    _isLoading = true;
    final res = await dio.get("/h5/learner/info");
    final data = UserInfo.fromJson(res.data["data"]);
    setState(() {
      userInfo = data;
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: true,
        child: _isLoading
            ? Center(
                child: SpinKitPulse(
                  color: Theme.of(context).colorScheme.secondary,
                  size: 50.0,
                ),
              )
            : SingleChildScrollView(
                child: Column(
                  children: [
                    _buildAvatarRow(),
                    _buildTabRow(),
                    SizedBox(
                      height: 20,
                    ),
                    _buildMenuList(),
                  ],
                ),
              ),
      ),
    );
  }

  Widget _buildAvatarRow() {
    if (userInfo == null) {
      return SizedBox.shrink();
    }

    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        Navigator.of(context).pushNamed(AppRoutes.PROFILE_DETAIL);
      },
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        child: Row(
          children: [
            Expanded(
                child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox.fromSize(
                  size: Size.square(80),
                  child: CircleAvatar(
                    backgroundImage: (userInfo!.avatar != null
                        ? NetworkImage(userInfo!.avatar)
                        : AssetImage('assets/images/avatar.png') as ImageProvider),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(left: 10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          userInfo!.nickname!,
                          style: TextStyle(fontSize: 20, color: Color(0xff2e3944)),
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: 6),
                          child: Text(
                            "查看并编辑个人资料",
                            style: TextStyle(color: Color(0xff9d9fa7)),
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ],
            )),
            Icon(
              Icons.arrow_forward_ios_outlined,
              size: 16,
              color: Color(0xff969799),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTabRow() {
    final cardWidth = MediaQuery.of(context).size.width / 2 - 30;
    final _cardSize = Size(cardWidth, 80);
    final _iconColor = Theme.of(context).colorScheme.secondary;
    return GestureDetector(
      onTap: () {},
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Card(
              child: Ink(
                child: InkWell(
                  onTap: () {},
                  child: SizedBox.fromSize(
                    size: _cardSize,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("我的订阅"),
                        SizedBox(
                          width: 20,
                        ),
                        Icon(
                          Icons.bookmark,
                          color: _iconColor,
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            Card(
              child: Ink(
                child: InkWell(
                    onTap: () {},
                    child: SizedBox.fromSize(
                      size: _cardSize,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text("我的消息"),
                          SizedBox(
                            width: 20,
                          ),
                          Icon(
                            Icons.sms,
                            color: _iconColor,
                          )
                        ],
                      ),
                    )),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildMenuList() {
    return Card(
      child: Column(
        children: [
          ClickItem(
            leading: _buildLeading("我的订单", Icons.wysiwyg),
            onTap: () {},
          ),
          ClickItem(
            leading: _buildLeading("内容分类", Icons.poll),
            onTap: () {},
          ),
          ClickItem(
            bordered: false,
            leading: _buildLeading("设置", Icons.settings),
            onTap: () {},
          ),
          ClickItem(
            bordered: false,
            leading: _buildLeading("退出登录", Icons.logout),
            onTap: () {
              SpUtil.remove("isLogin");
              SpUtil.remove("token");
              Navigator.of(context).pushNamed(AppRoutes.LOGIN);
            },
          )
        ],
      ),
    );
  }

  Widget _buildLeading(String title, IconData iconData) {
    return Row(
      children: [
        Icon(
          iconData,
          color: Color(0xff646464),
          size: 18,
        ),
        SizedBox(
          width: 10,
        ),
        Text(title)
      ],
    );
  }
}
